<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col :span="15">
        <el-row>
          <el-col class="manage-info-title">订单信息</el-col>
        </el-row>
        <el-row style="margin-top: 15px; height: 25px;">
          <el-col :span="4">
            订单号码：
          </el-col>
          <el-col :span="8">
            {{ row.ordernum }}
          </el-col>
          <el-col :span="4">
            订单状态：
          </el-col>
          <el-col :span="8">
            {{
              row.state === 0 ? '待取车' : row.state === 1 ? '待还车' : '已还车'
            }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="4">
            取车日期：
          </el-col>
          <el-col :span="8">
            {{ row.picktime }}
          </el-col>
          <el-col :span="4">
            还车日期：
          </el-col>
          <el-col :span="8">
            {{ row.returntime }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="4">
            取车地区：
          </el-col>
          <el-col :span="8">
            {{ row.pickaddress }}
          </el-col>
          <el-col :span="4">
            还车地区：
          </el-col>
          <el-col :span="8">
            {{ row.returnaddress }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="4">
            配送状态：
          </el-col>
          <el-col :span="8">
            {{ row.delivery === '1' ? '送车上门' : '用户自提' }}
          </el-col>
          <el-col :span="4">
            租车状态：
          </el-col>
          <el-col :span="8">
            {{ row.rentalstate === '0' ? '婚车' : row.rentalstate === '1' ? '自驾' : row.rentalstate === '2' ? '商务' : row.rentalstate === '3' ? '静展' : '-' }}
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <el-row>
          <el-col class="manage-info-title">费用明细</el-col>
        </el-row>
        <el-row style="margin-top: 15px; height: 25px;">
          <el-col :span="9">
            支付方式：
          </el-col>
          <el-col :span="15">
            {{ row.method === '0' ? '银行卡' : row.method === '1' ? '微信' : '支付宝' }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="9">
            租赁费用：
          </el-col>
          <el-col :span="15">
            {{ row.cost }}元
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="9">
            押金费用：
          </el-col>
          <el-col :span="15">
            {{ row.deposit }}元
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="9">
            费用合计：
          </el-col>
          <el-col :span="15">
            {{ row.sumcost }}元
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" style="margin-top: 25px">
      <el-col :span="15">
        <el-row>
          <el-col class="manage-info-title">车辆信息</el-col>
        </el-row>
        <el-row style="margin-top: 15px; height: 25px;">
          <el-col :span="4">
            车辆品牌：
          </el-col>
          <el-col :span="8">
            {{ row.brand }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="4">
            车辆编号：
          </el-col>
          <el-col :span="8">
            {{ row.cid }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="4">
            车牌号：
          </el-col>
          <el-col :span="8">
            {{ row.number }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="4">
            车牌类型：
          </el-col>
          <el-col :span="8">
            {{ row.ctype }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="4">
            颜色：
          </el-col>
          <el-col :span="8">
            {{ row.color }}
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <el-row>
          <el-col class="manage-info-title">客户信息</el-col>
        </el-row>
        <el-row style="margin-top: 15px; height: 25px;">
          <el-col :span="9">
            客户编号：
          </el-col>
          <el-col :span="15">
            {{ row.pid }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="9">
            客户姓名：
          </el-col>
          <el-col :span="15">
            {{ row.name }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="9">
            证件类型：
          </el-col>
          <el-col :span="15">
            {{ row.document }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="9">
            证件号码：
          </el-col>
          <el-col :span="15">
            {{ row.dnumber }}
          </el-col>
        </el-row>
        <el-row style="height: 25px;">
          <el-col :span="9">
            手机号码：
          </el-col>
          <el-col :span="15">
            {{ row.tel }}
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ManageInfo',
  props: {
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style scoped>
  .manage-info-title {
    border-bottom: 1px solid #ddd;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
  }
</style>
